<template>
	<view class="flex-col">
		<view class=" bg-white brs-12 mt-12 px-3 hh position-relative">
			<view class="d-flex justify-content-between align-items-center border-line py-3 ">
				<view class="d-flex align-items-center">
					<text class=" text-666D73 font-500 nick">姓名</text>
				</view>
				<view class="pe-2 ">
					<input class="ms-4 inputs " placeholder="请问怎么称呼您"
						placeholder-style="font-size: 32rpx;font-weight: 500;color: #AAB5BF;" v-model="form.contact_name"
						type="text">
					</input>
				</view>
			</view>
			<view class="d-flex justify-content-between align-items-center border-line py-3 ">
				<view class="d-flex align-items-center">
					<text class="phones text-666D73 font-500">联系方式</text>
				</view>
				<view class="pe-2">
					<input class="ms-4 inputs" placeholder="请输入您的联系方式"
						placeholder-style="font-size: 32rpx;font-weight: 500;color: #AAB5BF;" v-model="form.mobile"
						type="text">
					</input>
				</view>
			</view>
			<view class="d-flex flex-column py-3 ">
				<text class=" text-666D73 font-500">留言</text>
				<view class="mt-12 position-relative textare">
					<textarea class="w-100" v-model="form.content"
						placeholder-style="font-size: 28rpx;font-weight: 500;color: #AAB5BF;" type="textarea"
						placeholder="请输入..." maxlength="200" />
					<view class="text-666D73 font-12 limit">
						<text>{{limitNum}}</text>/200
					</view>
				</view>
				<view class="font-14 text-666D73 mt-12">
					请留下您的联系方式和具体意向，我们会有专人与您联系！
				</view>
			</view>

			<view class="position-fixd save-action" @click="save">
				<view class="save bg-AAB5BF text-white u-text-center"
					:class="form.mobile&&form.contact_name?'bg-theme':'bg-AAB5BF'">
					<text class="font-600 font-20">保存</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	export default {
		data() {
			return {
				inputStyle: {
					fontSize: '16px',
					fontWeight: 500,

				},
				form: {
					contact_name: '',
					mobile: '',
					content: ''
				},

			};
		},
		onLoad() {
				this.form.mobile=this.vuex_user.mobile
		},
		computed: {
			limitNum() {
				return this.form.content.length
			}
		},

		methods: {
			save() {
				if (!(this.form.mobile && this.form.contact_name)) return
				if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.form.mobile)) return this.$u.toast('请输入正确的手机号码')
				this.$u.api.submitApplyCooperation(this.form).then((res) => {
					this.$u.toast(res.msg)
					setTimeout(() => {
						this.$u.route({
							url: 'pages/myCenter/myCenter',
							type: 'tab'
						})
					},3000)
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.nick,
	.phones {
		&::before {
			content: '＊';
			color: red;
			font-size: 20rpx;
			vertical-align: middle;
		}
	}

	.inputs {
		font-size: 32rpx;
		font-weight: 500;
		color: #222426;
		text-align: right !important;
	}

	.textare {
		font-size: 32rpx;
		font-weight: 500;
		color: #222426;
		width: 100%;
		height: 380rpx;
		padding: 24rpx !important;
		background-color: #F0F2F5;
		border-radius: 8rpx;
	}

	.limit {
		position: absolute;
		right: 24rpx;
		bottom: 20rpx;
	}

	.border-line {
		border-bottom: 1px solid #f5f7f8;
	}

	.save-action {
		bottom: 128rpx;

		.save {
			margin: 0 auto;
			width: 686rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 40rpx 0 40rpx 40rpx;
		}
	}
</style>